DOM 文件物件模型
- DOM 全名為 Document Object Model
- 就是把 HTML 的標籤（ Document ） 轉換成物件( Object )。
JavaScript 可以操作物件，但不能直接操作頁面上的標籤，所以 DOM 就是瀏覽器幫 object 轉換成 => HTML 對應的標籤，進而讓 JS 可以改變到頁面的元素。也就是說「DOM 就是 JS 跟 HTML 溝通的橋樑。」
選取元素
- Tag
document.getElementsByTagName("header"); - Class Name
document.getElementsByClassName("cotainerBody"); - ID （ 注意：Element 沒有 s，因為 ID 元素只能有一個 ）
document.getElementById("container"); - CSS 選擇器
document.querySelector("#header p"); =>可以選取到 #header 底下的第一個 p
document.querySelectorAll("#header p"); =>可以選取到 #header 底下所有的 p 就像寫 CSS 來選擇元素。
id用#、class 用.、tag用<tag 本身>、關係選擇器> + ~- 但 querySelector 只會回傳第一個元素，如果想要選取到所有匹配到的元素，可以改用 querySelectorAll。
- element.closest() 選取最靠近的父層元素
注意：script 要放增加、刪減 className
增加、刪減 className
增加 : .classList.add("active")
移除 : .classList.remove("active")
開關 : .classList.toggle("active")
沒有此 class → 新增、有此 class → 移除
是否包含該 class : .classList.contains("active")在元素後面，不然 JS 無法對元素操作
修改 text & HTML
.innerText
- 只抓取標籤裡的內容、不包含標籤本身
- 只能寫入純文字，將要設定的值「賦值」到 innerText
element.innerText = "content"
.innerHTML
- 抓取標籤裡的所有內容、包含子標籤 ( 如果裡面沒有子標籤，抓取內容就跟 innerText 一樣 ）
- 跟 innerText 不同的是，可以寫入標籤
element.innerHTML = "<div>content</div>"
.outerHTML
- 改變標籤內容、包括標籤本身
element.outerHTML = "<new-element>...<div>content</div>...<new-element>"
新增元素
注意：要新增 or 刪除元素，要先找到它的父層，再利用
appendChild()orremoveChild()處理創造元素
document.createElement('button')=>表示＜button></button>- 加上屬性
.setAttribute('data-value', num)=>表示＜button data-value="num"></button> - 加上 className
.classList.add('btn')=>表示＜button class="btn" data-value="num"></button> - 在 <目標物> 最後加上元素
- 舉例：在 ＜div＞＜/div＞ 底下新增 ＜button＞＜/button＞ 元素
document.querySelector('div').appendChild(document.createElement('button'))=> 表示<div><button></button></div>- 舉例：在 ＜div＞＜/div＞ 底下新增 ＜button class="btn"＞＜/button＞ 元素
document.querySelector('div').appendChild(document.createElement('button').classList.add('btn'))=> 表示<div><button class="btn"></button></div>
移除元素
- 舉例：把 ＜div＞＜/div＞ 底下的 ＜button class="btn"＞＜/button＞ 元素移除
document.querySelector('div').removeChild(document.querySelector('.btn'))=> 表示<div><button class="btn"></button></div>裡面這個 class="btn" 的元素就被移除掉了
舉例：新增按鈕
document.querySelector('.add__btn').addEventListener('click', () => { const btn = document.creatElement('button'); // 創造元素 btn.setAttribute('data-value', num); // 加上屬性 btn.classList.add('btn'); // 加上 className btn.innerText = num; // 加上內容 =>表示＜button class="btn" data-value="num">num</button> document.querySelector('.outer').appendChild(btn); // 把新元素放上去 })
事件監聽 Event Listener
- 簡單來說就是指定畫面的某一元素，電腦會監聽當此元素發生 「什麼事」 、會再進行後續的反應，而我們可以指定監聽的「 事件 」是什麼、當它發生的這動作稱為 「觸發」。
- 在 element 綁定一個 click 事件
- 當滑鼠點擊到 element ，即觸發了element 的 click 事件，會進行 callback function
element.addEventListener('click', function(){
// ... callback => 當按鈕點擊時、要做的動作
});
事件資訊 function(e)
onClick 事件發生的同時，瀏覽器會記下當下的數據（點選的位置, 點選的標籤, 相關內容），我們可以藉由程式碼來撈取我們所需要的訊息
event 資訊會放在 callback function 裡面的第一個參數，通常都是取名 event 或簡寫 e，可以當成是一個「 物件 」，裡面有各種此事件的參數值，例如：
click 點擊
- e.target 點擊到的元素
- e.screenX 滑鼠離視窗左邊的距離
- e.screenY 滑鼠離視窗上邊的距離
- 若是想拿到我們點擊的 element 屬性
e.target.getAttribute('data-value') keydown 按下按鍵e.key 按鍵號碼
表單事件處理 onSubmit
當表單 form 中的 submit 按鈕 click 的時候，會有個預設行為，就是「 送出表單 」，預設是 GET 方法，並把參數帶入原網址送出，而 submit 事件是在表單送出前會觸發，用處是可以拿來驗證表單內容。
例如 密碼 跟 確認密碼 輸入的值不一樣的話，可以用 e.preventDefault() 來阻止表單送出。
<body>
<form class="form" action="">
密碼：<input type="password" name="password1">
確認密碼：<input type="password" name="password2">
<button type="submit">送出表單</button>
</form>
<script>
const form = document.querySelector('.form');
form.addEventListener('submit', function(e){
const pw1 = document.querySelector('input[name="password1"]');
const pw2 = document.querySelector('input[name="password2"]');
if (pw1.value !== pw2.value) e.preventDefault(); // 密碼不同、無法送出表單
});
</script>
</body>
//重點：
事件監聽 Event Listener（滑鼠點、滾輪、鍵盤）
反應（變色、換頁、發ＡＰＩ）
指令：
選到 節點(標籤） 加上 Listener 設定反應
`document.querySelector(節點).addEventListener(監聽, 反應)`
阻止預設動作 e.preventDefault()
- 阻止瀏覽器上的特定元素在該事件預設的行為，以下是比較常用的情況：
<form>的 submit - 阻止送出表單
<a>的 click 事件 - 阻止跳網址
<input>的 keypress 事件 - 阻止輸入按鍵
